<template>
   <div id="Sankey" :style="styleBase">
        <div id="signalWindow" ref = "signalWindow" v-show="signalEnable">
            <p>博物馆名:{{signalMusem.name}}</p>
            <p>博物馆类别:{{signalMusem.type}}</p>
            <p>藏品类别:{{signalMusem.collection}}</p>
            <p>藏品时期:{{signalMusem.appperiod}}</p>
        </div>
        <div id="tableWindow" ref = "tableWindow"  v-show="tableEnable">
            <Table :tableData="tableData"
                @tableMouseEnter="tableMouseEnter"
                @tableMouseLeave="tableMouseLeave"
            >
            </Table>
        </div>
        <svg :style="styleBase" @click="disappearTable()">
            <g class="main" :transform="`translate(${margin.left},${margin.top})`">
                <g class="sankeyRects">
                    <rect v-for="item in nodes" :key="item.id" :x="item.x0+5" :y="item.y0" :width="(item.x1-item.x0)-10" :height="item.y1-item.y0" fill="#7a4c3d"
                        @click.stop="displayTable($event,item) " @mouseenter="namesRectOver($event,item)" @mouseleave="namesRectLeave()"
                        >
                    </rect>
                </g>
                <g class="sankeyLines">
                    <path v-for="item in links" :key="item.index" :class="item.class" :d="sankeyD3.sankeyLinkHorizontal()(item)" :stroke="sankeyColorMap(item.type)" :stroke-width="item.width" fill="none" @mouseenter="pathmouseenter($event,item)" @mouseleave="pathmouseleave()">
                    </path>
                </g>
                <g class="sankeyTexts">
                    <text v-for="item in textNode.nodes" :x="item.x1" :y="(item.y0+item.y1)/2+8" class="zhuText" text-anchor="start">
                        {{item.id==="魏晋南北朝"?"南北朝":item.id}}
                    </text>
                    <text v-for="item,i in textNode.bottom" :x="item.x1-40" :y="innerHeight-55" font-size="16" text-anchor="start">
                        {{bottomWord[i]}}
                    </text>
                </g>
            </g>
        </svg>
   </div>
</template>
 
<script>
import {colormap,colormapHig} from 'api/js/config.js'
import Table from 'components/Table.vue'

export default {
   name: 'Sankey',
   props: {
       base: {
           type: Object,
       },
       initData: {
           type: Object,
       },
       sankeySelectName: {
           type: String,
       },
   },
    data () {
       return {
           bottomWord: ['博物馆类别','藏品类别','藏品时期'],
           signalEnable:true,
           tableEnable: true,
           signalWindowBase: {'width':0,'height':0},
           tableWindowBase: {'width':0,'height':0},
           tableData: [],
           sankey: undefined,
           nodes: undefined,
           links: undefined,
           sankeyD3: undefined,
           colorScale: undefined,
           groupG: undefined,
           groupColor: undefined,
           lastType: [],
           nameMap: undefined,
           signalMusem: {
               name: '',
               type: '',
           },
           margin: {top:10,bottom:10,left:50,right:85},
           offset: {
               /*depth: offsetY*/
               'source': {
               },
               'target': {
                    3:80,
               }

           },
           lastMapName: '',

       }
   },
   computed: {
       styleBase() {
           return {
               width: this.base.width+"px",
               height: this.base.height+"px",
           }
       },
       innerWidth() {
           return this.base.width - this.margin.left - this.margin.right
       },
       innerHeight() {
           return this.base.height - this.margin.bottom - this.margin.top
       },
       textNode() {
           let p = {'nodes':[],'bottom':{}}
           if(this.nodes!=undefined) {
               for(let i = 0; i < this.nodes.length; ++i) {
                   if(i>65) {
                       p['nodes'].push(this.nodes[i])
                       p['bottom'][this.nodes[i].depth-1] = {'x0':this.nodes[i].x0,'x1':this.nodes[i].x1}
                   } 
               }
           }
           return p
       }
   },
    watch: {
       initData(data) {
            //初始化弹窗宽度高度
            this.signalWindowBase.width = this.$refs.signalWindow.clientWidth
            this.signalWindowBase.height = this.$refs.signalWindow.clientHeight
            this.tableWindowBase.width = this.$refs.tableWindow.clientWidth
            this.tableWindowBase.height = this.$refs.tableWindow.clientHeight
            this.signalEnable = false
            this.tableEnable = false
            this.sankeyD3 = d3
            this.nameMap = data.nameMap
            this.colorScale = this.sankeyD3.scaleOrdinal(d3.schemeCategory10)
            this.sankey = this.sankeyD3.sankey().nodeWidth(15).nodePadding(5)
            .size([this.innerWidth,this.innerHeight]).nodeId(d=>d.id)
            .linkSort((d1,d2)=>{
                if(d1.index<d2.index) {
                    return -1
                } else {
                    return 1
                }
            })
            .nodeSort((d1,d2)=>{
                if(d1.index<d2.index) {
                    return -1
                } else {
                    return 1
                }
            });          
            let obj = this.sankey({
                nodes: data.nodes,
                links: data.links
            });
            for(let i = obj.nodes.length-1; i >=0 ; --i) {
                let val = obj.nodes[i]
                if(val.depth in this.offset['target']) {
                    val.y0+=this.offset['target'][val.depth]
                    val.y1+=this.offset['target'][val.depth]
                }
            }
            for(let i = obj.links.length-1; i>=0; --i) {
                let val = obj.links[i]
                if(val.target.depth in this.offset['target']) {
                    val.y1+=this.offset['target'][val.target.depth]
                }
                if(val.source.depth in this.offset['source']) {
                    val.y0+=this.offset['source'][val.source.depth]
                }
            }
            
            this.nodes = obj.nodes
            this.links = obj.links
            //console.log(this.nodes)
        },
        //有博物馆选中了
        sankeySelectName(name) {
           
            if(name!="") {
                if(this.lastMapName!='') {
                    this.namePahtLeave()
                    this.lastMapName = ''
                }
                this.lastMapName = name
                this.namePathSelect(this.nameMap[name].class,name,this.nameMap[name].type)
            } else {
                this.namePahtLeave()
                this.lastMapName = ''
            }
        },
   },
   mounted() {
        
   },
   components: {
       Table,
   },
   methods: {
       sankeyColorMap(val) {
           return colormap(val)
       },
       sankeyColorHighMap(val) {
           return colormapHig(val)
       },
       tableMouseEnter(obj) {
           this.namePathSelect(obj.class,obj.name,obj.type)
           this.$emit("sankeySelectMethod",obj.name)
       },
       tableMouseLeave() {
           this.namePahtLeave()
           this.$emit("sankeySelectMethod","")
       },
       displayTable(event,item) {
           if(item.depth == 0) {
               return
           } 
           let sourceLinks = item.sourceLinks
           //tableData
           this.tableData = []
           for(let i = 0; i < sourceLinks.length; ++i) {
               let museum = sourceLinks[i].museum
               let other = this.nameMap[museum]
               this.tableData.push(Object.assign({'name':museum},other))
           }
          
           this.tableEnable = true
           let height = this.tableWindowBase.height/2
           let left = (event.offsetX + 20)+'px'
           let top
           if(event.offsetY>height)
                top = (event.offsetY - height ) + 'px'
            else
                top = '0px'
           this.$refs.tableWindow.style.top = top
           this.$refs.tableWindow.style.left = left
        //    this.namesRectSelect(item)
       },
       disappearTable() {
           this.tableEnable = false
           //this.namesRectLeave()
       },
       pathmouseenter(event,item) {
           //弹窗控制
           this.signalEnable = true
           this.signalMusem = Object.assign({'name':item.museum},this.nameMap[item.museum])

           let width = this.signalWindowBase.width/2
           let height = this.signalWindowBase.height + 10
           let left = (event.offsetX - width)+'px'
           let top
           if(event.offsetY >= height)
                top = (event.offsetY - height) + 'px'
            else 
                top = (event.offsetY + 10) + 'px'
           this.$refs.signalWindow.style.top = top
           this.$refs.signalWindow.style.left = left
  
           this.namePathSelect(item.class,item.museum,item.type)
           this.$emit("sankeySelectMethod",item.museum)
       },
       pathmouseleave() {
            this.signalEnable = false
            this.namePahtLeave()
            this.$emit("sankeySelectMethod","")
       },
       namePathSelect(className,museumName,type) {
           this.lastType = type
           this.groupG = document.getElementsByClassName(className)
           //this.groupColor = this.groupG[0].style.stroke
           for(let i = 0; i < this.groupG.length; ++i) {
               this.groupG[i].style.stroke = this.sankeyColorHighMap(type)
               //this.groupG[i].style.strokeOpacity = 1.5
           }
           //this.$emit("MuseumSelect",museumName)
       },
       namePahtLeave() {
           for(let i = 0; i < this.groupG.length; ++i) {
               this.groupG[i].style.stroke = this.sankeyColorMap(this.lastType)
               //this.groupG[i].style.strokeOpacity = 1
           }
           //this.$emit("MuseumNSelect")
       },
        namesRectOver(event,item){

            let museumNames = []
           let links = item.targetLinks;
        //    if(item.layer == this.bottomWord.length) links = tgtLinks;
           let rectGroup = []
            let type = []
           for (let i = 0; i < links.length; i++) {
               const link = links[i];
               museumNames.push(link.museum)
               let paths = document.getElementsByClassName(link.class)
                
               let j=0
               while(j<this.bottomWord.length){
                   type.push(link.type)
                   rectGroup.push(paths[j])
                   //this.sankeyColorHighMap(type)
                   paths[j].style.stroke = this.sankeyColorHighMap(link.type);
                   j++;
               }
           }
           this.rectGroup = rectGroup
           this.lastType = type
           this.$emit("sankeyManySelectMethod",museumNames)

       },
       namesRectLeave(){
           for (let i = 0; i < this.rectGroup.length; i++) {
               this.rectGroup[i].style.stroke = this.sankeyColorMap(this.lastType[i]) 
           }
           this.$emit("sankeyManySelectMethod",[])
       }
   },
}
</script>
 
<style>
.zhuText {
    stroke: #7a4c3d;
    stroke-width: 0.4;
}
#Sankey {
    position: relative;
    background-color: transparent
}
#signalWindow {
    position: absolute;
    padding-left:10px;
    width: 200px;
    height: 165px;
    background-color: #eee;
}

#tableWindow {
    position: absolute;
    width: 500px;
    height: 350px;   
}
</style>